{assign name="current_page" value="dashboard" /}
{include file="layout/layui_header" /}

<style>
    .main-content {
        padding: 20px;
    }
    .widget {
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .widget-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
    }
    .widget-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }
    .page-header {
        margin-bottom: 20px;
    }
    .page-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }
    .page-subtitle {
        font-size: 14px;
        color: #666;
        margin: 0;
    }
    .stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.3s;
    }
    .stat-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
    }
    .quick-action-item {
        display: block;
        text-decoration: none;
        color: inherit;
    }
    .quick-action-item:hover .action-card {
        border-color: #1890ff;
        box-shadow: 0 2px 8px rgba(24,144,255,0.2);
        transform: translateX(5px);
    }
    .action-card {
        display: flex;
        align-items: center;
        padding: 15px;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        transition: all 0.2s;
    }
</style>

<div class="main-content">
    <div class="page-header">
        <h1 class="page-title">仪表板</h1>
        <p class="page-subtitle">欢迎来到精简版权限管理系统</p>
    </div>
    
    <!-- 统计卡片 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="stat-card">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <div style="color: #666; font-size: 14px; margin-bottom: 8px;">管理员总数</div>
                        <div style="font-size: 32px; font-weight: 600; color: #333;">
                            <?= $stats['admin_count'] ?>
                        </div>
                        <div style="font-size: 12px; color: #52c41a; margin-top: 4px;">
                            <i class="layui-icon layui-icon-username"></i>
                            活跃用户
                        </div>
                    </div>
                    <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-col-md3">
            <div class="stat-card">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <div style="color: #666; font-size: 14px; margin-bottom: 8px;">角色总数</div>
                        <div style="font-size: 32px; font-weight: 600; color: #333;">
                            <?= $stats['role_count'] ?>
                        </div>
                        <div style="font-size: 12px; color: #1890ff; margin-top: 4px;">
                            <i class="layui-icon layui-icon-group"></i>
                            系统角色
                        </div>
                    </div>
                    <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                        <i class="layui-icon layui-icon-group"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-col-md3">
            <div class="stat-card">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <div style="color: #666; font-size: 14px; margin-bottom: 8px;">权限总数</div>
                        <div style="font-size: 32px; font-weight: 600; color: #333;">
                            <?= $stats['permission_count'] ?>
                        </div>
                        <div style="font-size: 12px; color: #ff7875; margin-top: 4px;">
                            <i class="layui-icon layui-icon-vercode"></i>
                            系统权限
                        </div>
                    </div>
                    <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        <i class="layui-icon layui-icon-vercode"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="layui-col-md3">
            <div class="stat-card">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <div style="color: #666; font-size: 14px; margin-bottom: 8px;">系统状态</div>
                        <div style="font-size: 20px; font-weight: 600; color: #52c41a; margin-top: 8px;">
                            正常运行
                        </div>
                        <div style="font-size: 12px; color: #666; margin-top: 4px;">
                            <i class="layui-icon layui-icon-ok-circle"></i>
                            运行中
                        </div>
                    </div>
                    <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                        <i class="layui-icon layui-icon-ok-circle"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="layui-row layui-col-space15" style="margin-top: 20px;">
        <!-- 快速操作 -->
        <div class="layui-col-md6">
            <div class="widget">
                <div class="widget-header">
                    <h3 class="widget-title">
                        <i class="layui-icon layui-icon-fire" style="color: #ff7875;"></i>
                        快速操作
                    </h3>
                </div>
                <div class="widget-content">
                    <div style="display: flex; flex-direction: column; gap: 15px;">
                        <a href="<?= url('admin/settings/users') ?>" class="quick-action-item">
                            <div class="action-card">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                    <i class="layui-icon layui-icon-username" style="color: white; font-size: 18px;"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; margin-bottom: 4px;">管理员管理</div>
                                    <div style="color: #666; font-size: 12px;">添加、编辑管理员账号</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="<?= url('admin/settings/roles') ?>" class="quick-action-item">
                            <div class="action-card">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                    <i class="layui-icon layui-icon-group" style="color: white; font-size: 18px;"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; margin-bottom: 4px;">角色管理</div>
                                    <div style="color: #666; font-size: 12px;">管理系统角色配置</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="<?= url('admin/settings/permissions') ?>" class="quick-action-item">
                            <div class="action-card">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                    <i class="layui-icon layui-icon-vercode" style="color: white; font-size: 18px;"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; margin-bottom: 4px;">权限管理</div>
                                    <div style="color: #666; font-size: 12px;">管理系统权限配置</div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="<?= url('admin/settings/profile') ?>" class="quick-action-item">
                            <div class="action-card">
                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                    <i class="layui-icon layui-icon-set" style="color: white; font-size: 18px;"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; margin-bottom: 4px;">个人设置</div>
                                    <div style="color: #666; font-size: 12px;">修改个人信息和密码</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 系统信息 -->
        <div class="layui-col-md6">
            <div class="widget">
                <div class="widget-header">
                    <h3 class="widget-title">
                        <i class="layui-icon layui-icon-chart" style="color: #52c41a;"></i>
                        系统信息
                    </h3>
                </div>
                <div class="widget-content">
                    <div style="display: flex; flex-direction: column; gap: 12px;">
                        <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
                            <span style="color: #666;">系统版本</span>
                            <span style="font-weight: 600;">v1.0 精简版</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
                            <span style="color: #666;">框架版本</span>
                            <span style="font-weight: 600;">ThinkPHP 5.0.24</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
                            <span style="color: #666;">登录时间</span>
                            <span style="font-weight: 600;"><?= $stats['login_time'] ?></span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
                            <span style="color: #666;">当前用户</span>
                            <span style="font-weight: 600;"><?= $admin_info['username'] ?? '管理员' ?></span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 6px;">
                            <span style="color: #666;">用户角色</span>
                            <span style="font-weight: 600; color: #1890ff;"><?= $admin_info['role_name'] ?? '超级管理员' ?></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 快速统计 -->
            <div class="widget" style="margin-top: 15px;">
                <div class="widget-header">
                    <h3 class="widget-title">
                        <i class="layui-icon layui-icon-tips" style="color: #1890ff;"></i>
                        功能说明
                    </h3>
                </div>
                <div class="widget-content">
                    <div style="padding: 15px; background: #e6f7ff; border: 1px solid #91d5ff; border-radius: 6px;">
                        <div style="color: #0050b3; font-size: 14px; line-height: 1.8;">
                            <p style="margin: 0 0 8px 0;">✓ 本系统为精简版权限管理系统</p>
                            <p style="margin: 0 0 8px 0;">✓ 支持管理员账号管理</p>
                            <p style="margin: 0 0 8px 0;">✓ 支持角色和权限配置</p>
                            <p style="margin: 0;">✓ 基于RBAC权限模型设计</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="text-align: center; padding: 20px; color: #999; border-top: 1px solid #f0f0f0; margin-top: 40px;">
    © 2024 精简版权限管理系统 - 基于ThinkPHP 5.1
</div>

<script>
layui.use(['element', 'layer'], function(){
    var element = layui.element;
    var layer = layui.layer;
    
    // 页面加载完成提示
    layer.msg('欢迎使用权限管理系统', {icon: 1, time: 1500});
});
</script>

{include file="layout/layui_footer" /}
